<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>贪吃蛇小游戏</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    h1 {
      margin-top: 10px;
      text-align: center;
    }
    .map {
		background-color: aquamarine;
		width: 600px;
		height: 400px;
		margin: 10px auto;
		position: relative;
	}
    .btn {
      display: flex;
      width: 400px;
      margin: 10px auto;
      justify-content: space-between;
    }
    button {
      width: 65px;
      height: 35px;
      text-align: center;
      border-radius: 5px;
      background-color: rgb(22, 236, 190);
      border-color: aquamarine;
    }
  </style>
</head>
<body>
  <h1>贪吃蛇小游戏</h1>
  <div class="map"></div>
  <div class="btn">
    <button class="start">start</button>
    <button class="pause">pause</button>
    <button class="speed">speed</button>
  </div>


  <script>
	var map = document.querySelector('.map');
    function Snack() {
		this.width = 20;
		this.height = 20;
		this.direction = 'right';
		this.body = [
           {x:2, y:0},
		   {x:1, y:0},
		   {x:0, y:0}
		];
		//在map上根据子绝父相显示贪吃蛇
		this.display = function() {
			for(let i = 0; i < this.body.length; i++) {
				if(this.body[i].x !== null) {
					let sn = document.createElement('div');
					this.body[i].flag = sn;
					sn.style.width = this.width + 'px';
					sn.style.height = this.height + 'px';
					sn.style.borderRadius = '50%';
					sn.style.backgroundColor = 'black';
					sn.style.position = 'absolute';
					sn.style.left = this.body[i].x * this.width + 'px';
					sn.style.top = this.body[i].y * this.height + 'px';
                    map.appendChild(sn);
				}
			}
		}

		//让贪吃蛇移动起来
		this.run = function() {
            for(let i = this.body.length-1; i > 0; i--) {
				this.body[i].x = this.body[i-1].x;
				this.body[i].y = this.body[i-1].y;
			}
			//根据方向确定蛇的移动
			switch(this.direction) {
				case 'right' : 
                    this.body[0].x += 1;
				    break;
				case 'left':
				    this.body[0].x -= 1;
					break;
				case 'up':
				    this.body[0].y -= 1;
				    break;
				case 'down':
				    this.body[0].y += 1;
					break;
			}
			//碰到边界 游戏结束
			if(this.body[0].x < 0 || this.body[0].x > 29 || this.body[0].y < 0 || this.body[0].y > 19) {
				clearInterval(timer);
				alert('GAME OVER!!!');
				// 移除元素
				for(let i = 0; i < this.body.length; i++) {
					if(this.body[i].flag != null) {
						map.removeChild(this.body[i].flag);
					}
				}
				//初始化
				this.body = [
				   {x:2, y:0},
		           {x:1, y:0},
		           {x:0, y:0}
				];
				this.direction = 'right';
				this.display();
				return false;
			}
			
			// 吃到食物
			if(this.body[0].x == food.x && this.body[0].y == food.y) {
				this.body.push({x:null,y:null,flag:null});
				//清除食物
                map.removeChild(food.flag);
				food.display();
			}
			//碰到身体  游戏结束
			for(let i =4; i < this.body.length; i++) {
				if(this.body[i].x == this.body[0].x && this.body[i].y == this.body[0].y) {
					clearInterval(timer);
				alert('GAME OVER!!!');
				// 移除元素
				for(let i = 0; i < this.body.length; i++) {
					if(this.body[i].flag != null) {
						map.removeChild(this.body[i].flag);
					}
				}
				//初始化
				this.body = [
				   {x:2, y:0},
		           {x:1, y:0},
		           {x:0, y:0}
				];
				this.direction = 'right';
				this.display();
				return false;
				}
			}
			//
			for(let i = 0; i <this.body.length; i++) {
				if(this.body[i].flag !== null) {
					map.removeChild(this.body[i].flag);
				}
			}
			this.display();

		}
			
	}

	//创建食物
	function Food() {
		this.width = 20;
		this.height = 20;
		this.display = function() {
			fn = document.createElement('div');
			this.flag = fn;
            fn.style.width = this.width + 'px';
			fn.style.height = this.height + 'px';
			fn.style.backgroundColor = 'red';
			fn.style.borderRadius = '50%';
			fn.style.position = 'absolute';
			this.x = Math.floor(Math.random()*30);
            this.y = Math.floor(Math.random()*20);
			fn.style.left = this.width * this.x + 'px';
			fn.style.top = this.height * this.y + 'px';
			map.appendChild(fn);
		}
	}


    let snack = new Snack();
	let food = new Food();
	snack.display();
	food.display();

    //按键事件
	document.body.onkeydown = function(e) {
		var ev = e || window.event;
		switch(ev.keyCode) {
			case 38:
			   if(snack.direction != 'down') {
				   snack.direction = 'up';
			   }
			   break;
			case 40:
			   if(snack.direction != 'up') {
				   snack.direction = 'down';
			   }
			   break;
			case 37:
			   if(snack.direction != 'right') {
				   snack.direction = 'left';
			   }
			   break;
			case 39:
			   if(snack.direction != 'left') {
				   snack.direction = 'right';
			   }
			   break;
		}
	}

	
	let sbtn = document.querySelector('.start');
	let pbtn = document.querySelector('.pause');
	let spbtn = document.querySelector('.speed');
	var timer,speed;
	speed = 1;
	sbtn.onclick = function() {
		speed = 1;
		clearInterval(timer);
		timer = setInterval('snack.run()',500);
	}
	pbtn.onclick = function() {
		clearInterval(timer);
	}
	spbtn.onclick = function() {
		speed += 1;
		clearInterval(timer);
        timer = setInterval('snack.run()',500/speed);
 	}
  </script>
</body>
</html>